<script setup name="home">
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { computed, onMounted, ref } from 'vue';

const router = useRouter();
const store = useStore();

store.dispatch('homebrand/upBomeBrand');
store.dispatch('homebanner/upHomeBanner');
store.dispatch('homenew/upHomeNew');
store.dispatch('homehead/upHomeHead');
store.dispatch('homehot/upHomeHot');
store.dispatch('homegoods/upHomeGoods');

const bomeGoodsList = computed(() => store.state.homegoods.bomeGoodsList);
const bomeGoodsValue = computed(() => JSON.parse(JSON.stringify(bomeGoodsList.value)));

const bomeBrandList = computed(() => store.state.homebrand.bomeBrandList);
const bomeBrandValue = computed(() => JSON.parse(JSON.stringify(bomeBrandList.value)));

const homebannerList = computed(() => store.state.homebanner.homebannerList);
const homebannerValue = computed(() => JSON.parse(JSON.stringify(homebannerList.value)));

const homeNewList = computed(() => store.state.homenew.homeNewList);
const homeNewValue = computed(() => JSON.parse(JSON.stringify(homeNewList.value)));

const homeHeadList = computed(() => store.state.homehead.homeHeadList);
const homeHeadValue = computed(() => JSON.parse(JSON.stringify(homeHeadList.value)));

const homeHotList = computed(() => store.state.homehot.homeHotList);
const homeHotValue = computed(() => JSON.parse(JSON.stringify(homeHotList.value)));

function goToLogin() {
  router.push('/login');
};
// const clothes = ref(null);
// onMounted(() => {
// // 当clothes滚动到视野时，dispatch
//   const clearInterval = new IntersectionObserver(
//     (entries) => {
//       entries.forEach((entry) => {
//         if (entry.isIntersecting) {
//           store.dispatch('homegoods/upHomeGoods');
//         }
//       });
//     },
//     {
//       root: null,
//       rootMargin: '0px',
//       threshold: 0.1,
//     },
//   );
//   // 启动观察clothes.value是否进入视野
//   clearInterval.observe(clothes.value);
// });


</script>

<template>
  <div class="bog-box">
    <div class="goHorseLight">
      <div class="blackboard">
        <div
          v-for="item in homeHeadValue.result"
          :key="item.id"
        >
          {{ item.name }}
          <span>
            {{ item.children.slice(0, 2).map((item) => item.name).join(' ') }}
          </span>
        </div>
        <div>品牌 品牌推荐</div>
      </div>
      <el-carousel class="carousel" height="500px">
        <el-carousel-item
          v-for="item in homebannerValue.result"
          :key="item.id"
        >
          <img :src="item.imgUrl">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home-new">
      <div>
        <div class="new-title">
          <h1>
            新鲜好物
          </h1>
          <span class="look-all">新鲜出炉 品质靠谱</span>
          <span>查看全部 ></span>
        </div>
      </div>
      <div class="price-list">
        <div
          v-for="item in homeNewValue.result"
          :key="item.id"
          class="price-list-decline"
        >
          <img :src="item.picture">
          <div>{{ item.name }}</div>
          <div class="money">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
    <div class="home-new">
      <div>
        <div class="new-title">
          <h1>
            人气推荐
          </h1>
          <span class="look-all">人气爆款 不容错过</span>
        </div>
      </div>
      <div class="price-list">
        <div
          v-for="item in homeHotValue.result"
          :key="item.id"
          class="price-list-decline"
        >
          <img :src="item.picture">
          <p>{{ item.title }}</p>
          <p class="bba">{{ item.alt }}</p>
        </div>
      </div>
    </div>
    <div class="home-brand">
      <div>
        <div class="new-title">
          <h1>
            热门品牌
          </h1>
          <span class="look-all">国际经典 品质保证</span>
        </div>
        <div
          class="brand-board"
        >
          <img
            v-for="item in bomeBrandValue.result"
            :key="item.id"
            :src="item.logo"
          >
        </div>
      </div>
    </div>
    <div
      v-for="item in bomeGoodsValue.result"
      :key="item.id"
      class="bid-box"
    >
      <div class="home-panel">
        <h1>{{ item.name }}</h1>
        <div
          v-for="p in item.children"
          :key="p.id"
          class="head-panel"
        >
          <div>{{ p.name }}</div>
        </div>
        <span>查看全部 ></span>
        <div class="box">
          <div class="img">

          </div>
          <div
            v-for="t in item.goods"
            :key="t.id"
            class="box-samll"
          >
            <div class="little-box">
              <img :src="t.picture">
              <p>{{ t.name }}</p>
              <p>{{ t.desc }}</p>
              <p>￥{{ t.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.bog-box {
  width: 100vw;
  height: 100%;
  background: #f5f5f5;
  .nav {
    background: #333333;
    width: 100%;
    height: 53px;
    .title {
      height: 100%;
      width: 1240px;
      color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: end;
      margin: 0 auto;

      div {
        display: inline-block;
        margin: 0 10px;
        border-right: 1px solid #666666;
        padding-right: 5px;
      }
    }
  }
  .samll-box {
    background: white;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .container {
    width: 1240px;
    height: 132px;
    display: flex;
    >div {
      height: 100%;
      flex-direction: row;
      justify-content: center;
      margin: 0 auto;
      display: flex;
      align-items: center;
      line-height:132px;
    }

    .xiaotuxian {
      width: 200px;
      height: 100%;
    }
    .shopping-car {
      line-height:132px;
      margin: 0;
      font-size: 26px;

    }
  }
}
.goHorseLight {
  width: 1240px;
  height: 500px;
  text-align: center;
  margin: 0 auto;
  .carousel {
    position: relative;
  }
  .blackboard {
    width: 250px;
    height: 500px;
    color: white;
    background-color: rgba($color: #000000, $alpha: .5);
    position: absolute;
    z-index: 999;
    >div {
      width: 100%;
      height: 50px;
      line-height: 50px;
      &:hover {
        background-color: #27ba9b;
      }
    }
  }
}
.home-new {
  width: 100%;
  height: 541px;
  background: #fff;
  .new-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 1240px;
    height: 115px;
    margin: 0 auto;
    h1 {
      margin-right: 16px;
    }
    .look-all {
      width: 1011px;
      color: #999999;
    }
  }
}
.price-list {
  width: 1240px;
  height: 426px;
  margin: 0 auto;
  display: flex;
  .price-list-decline  {
    width: 306px;
    height: 406px;
    margin: 0 5px;
    &:hover {
      box-shadow: 0 3px 10px #ccc;
      transform: translateY(-4px);
    }
    img {
      width: 306px;
      height: 306px;
    }
    div {
      height: 42px;
      background: #f0f9f4;
      line-height: 42px;
      text-align: center;
      font-size: 24px;

      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-break: break-all;
      line-break: anywhere;
    }
    .money {
      color: red;
    }
    p {
      font-size: 20px;
      text-align: center;
    }
    .bba {
      color: #999999;
    }
  }
}
.home-brand {
  width: 100%;
  height: 460px;
  .new-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 1240px;
    height: 115px;
    margin: 0 auto;
    h1 {
      margin-right: 16px;
    }
    .look-all {
      width: 1011px;
      color: #999999;
    }
  }
  .brand-board {
    width: 1240px;
    height: 305px;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    padding: 5px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    line-break: anywhere;
    img {
      width: 240px;
      height: 305px;
      padding: 4px;
    }
  }
}
.bid-box {
  width: 1519px;
  height: 725px;
  background: white;
  .home-panel {
    width: 1240px;
    height: 725px;
    margin: 0 auto;
    display: flex;
      h1 {
        display: inline-block;
      }
      .head-panel {
        display: flex;
      }
  }
}

</style>
